<template>
  <div id="comment" class="mr-tab-panel">

    <div class="actor-new">
      <div class="rate">
        <strong>100<span>%</span></strong><br> <span>好评度</span>
      </div>
      <dl>
        <dt>买家印象</dt>
        <dd class="p-bfc">
          <q class="comm-tags"><span>性价比高</span><em>(2177)</em></q>
          <q class="comm-tags"><span>系统流畅</span><em>(1860)</em></q>
          <q class="comm-tags"><span>外观漂亮(</span><em>(1823)</em></q>
          <q class="comm-tags"><span>功能齐全</span><em>(1689)</em></q>
          <q class="comm-tags"><span>支持国产机</span><em>(1488)</em></q>
          <q class="comm-tags"><span>反应快</span><em>(1392)</em></q>
          <q class="comm-tags"><span>照相不错</span><em>(1119)</em></q>
          <q class="comm-tags"><span>通话质量好</span><em>(865)</em></q>
          <q class="comm-tags"><span>国民手机</span><em>(831)</em></q>
        </dd>
      </dl>
    </div>
    <div class="clear"></div>
    <div class="tb-r-filter-bar">
      <ul class=" tb-taglist mr-avg-sm-4">
        <li class="tb-taglist-li tb-taglist-li-current">
          <div class="comment-info">
            <span>全部评价</span>
            <span class="tb-tbcr-num">(32)</span>
          </div>
        </li>

        <li class="tb-taglist-li tb-taglist-li-1">
          <div class="comment-info">
            <span>好评</span>
            <span class="tb-tbcr-num">(32)</span>
          </div>
        </li>

        <li class="tb-taglist-li tb-taglist-li-0">
          <div class="comment-info">
            <span>中评</span>
            <span class="tb-tbcr-num">(32)</span>
          </div>
        </li>

        <li class="tb-taglist-li tb-taglist-li--1">
          <div class="comment-info">
            <span>差评</span>
            <span class="tb-tbcr-num">(32)</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="clear"></div>

    <ul class="mr-comments-list mr-comments-list-flip">
      <li class="mr-comment">
        <!-- 评论容器 -->
        <a href="javascript:void(0)">
          <img class="mr-comment-avatar" src="../../assets/images/hwbn40x40.jpg">
          <!-- 评论者头像 -->
        </a>

        <div class="mr-comment-main">
          <!-- 评论内容容器 -->
          <header class="mr-comment-hd">
            <!--<h3 class="mr-comment-title">评论标题</h3>-->
            <div class="mr-comment-meta">
              <!-- 评论元数据 -->
              <a href="#link-to-user" class="mr-comment-author">b***1 (匿名)</a>
              <!-- 评论者 -->
              评论于
              <time datetime="">2015年11月02日 17:46</time>
            </div>
          </header>

          <div class="mr-comment-bd">
            <div class="tb-rev-item " data-id="255776406962">
              <div class="J_TbcRate_ReviewContent tb-tbcr-content ">
                帮朋友买的，没拆开来看，据说还不错，很满意！
              </div>
              <div class="tb-r-act-bar">
                颜色分类：金&nbsp;&nbsp;电信4G
              </div>
            </div>

          </div>
          <!-- 评论内容 -->
        </div>
      </li>
      <li class="mr-comment">
        <!-- 评论容器 -->
        <a href="javascript:void(0)">
          <img class="mr-comment-avatar" src="../../assets/images/hwbn40x40.jpg">
          <!-- 评论者头像 -->
        </a>

        <div class="mr-comment-main">
          <!-- 评论内容容器 -->
          <header class="mr-comment-hd">
            <!--<h3 class="mr-comment-title">评论标题</h3>-->
            <div class="mr-comment-meta">
              <!-- 评论元数据 -->
              <a href="#link-to-user" class="mr-comment-author">b***1 (匿名)</a>
              <!-- 评论者 -->
              评论于
              <time datetime="">2015年11月02日 17:46</time>
            </div>
          </header>

          <div class="mr-comment-bd">
            <div class="tb-rev-item " data-id="255776406962">
              <div class="J_TbcRate_ReviewContent tb-tbcr-content ">
                帮朋友买的，没拆开来看，据说还不错，很满意！
              </div>
              <div class="tb-r-act-bar">
                颜色分类：金&nbsp;&nbsp;电信4G
              </div>
            </div>

          </div>
          <!-- 评论内容 -->
        </div>
      </li>
      <li class="mr-comment">
        <!-- 评论容器 -->
        <a href="javascript:void(0)">
          <img class="mr-comment-avatar" src="../../assets/images/hwbn40x40.jpg">
          <!-- 评论者头像 -->
        </a>

        <div class="mr-comment-main">
          <!-- 评论内容容器 -->
          <header class="mr-comment-hd">
            <!--<h3 class="mr-comment-title">评论标题</h3>-->
            <div class="mr-comment-meta">
              <!-- 评论元数据 -->
              <a href="#link-to-user" class="mr-comment-author">b***1 (匿名)</a>
              <!-- 评论者 -->
              评论于
              <time datetime="">2015年11月02日 17:46</time>
            </div>
          </header>

          <div class="mr-comment-bd">
            <div class="tb-rev-item " data-id="255776406962">
              <div class="J_TbcRate_ReviewContent tb-tbcr-content ">
                帮朋友买的，没拆开来看，据说还不错，很满意！
              </div>
              <div class="tb-r-act-bar">
                颜色分类：金&nbsp;&nbsp;电信4G
              </div>
            </div>

          </div>
          <!-- 评论内容 -->
        </div>
      </li>
      <li class="mr-comment">
        <!-- 评论容器 -->
        <a href="javascript:void(0)">
          <img class="mr-comment-avatar" src="../../assets/images/hwbn40x40.jpg">
          <!-- 评论者头像 -->
        </a>

        <div class="mr-comment-main">
          <!-- 评论内容容器 -->
          <header class="mr-comment-hd">
            <!--<h3 class="mr-comment-title">评论标题</h3>-->
            <div class="mr-comment-meta">
              <!-- 评论元数据 -->
              <a href="#link-to-user" class="mr-comment-author">b***1 (匿名)</a>
              <!-- 评论者 -->
              评论于
              <time datetime="">2015年11月02日 17:46</time>
            </div>
          </header>

          <div class="mr-comment-bd">
            <div class="tb-rev-item " data-id="255776406962">
              <div class="J_TbcRate_ReviewContent tb-tbcr-content ">
                帮朋友买的，没拆开来看，据说还不错，很满意！
              </div>
              <div class="tb-r-act-bar">
                颜色分类：金&nbsp;&nbsp;电信4G
              </div>
            </div>

          </div>
          <!-- 评论内容 -->
        </div>
      </li>
      <li class="mr-comment">
        <!-- 评论容器 -->
        <a href="javascript:void(0)">
          <img class="mr-comment-avatar" src="../../assets/images/hwbn40x40.jpg">
          <!-- 评论者头像 -->
        </a>

        <div class="mr-comment-main">
          <!-- 评论内容容器 -->
          <header class="mr-comment-hd">
            <!--<h3 class="mr-comment-title">评论标题</h3>-->
            <div class="mr-comment-meta">
              <!-- 评论元数据 -->
              <a href="#link-to-user" class="mr-comment-author">b***1 (匿名)</a>
              <!-- 评论者 -->
              评论于
              <time datetime="">2015年11月02日 17:46</time>
            </div>
          </header>

          <div class="mr-comment-bd">
            <div class="tb-rev-item " data-id="255776406962">
              <div class="J_TbcRate_ReviewContent tb-tbcr-content ">
                帮朋友买的，没拆开来看，据说还不错，很满意！
              </div>
              <div class="tb-r-act-bar">
                颜色分类：金&nbsp;&nbsp;电信4G
              </div>
            </div>

          </div>
          <!-- 评论内容 -->
        </div>
      </li>
    </ul>

    <div class="clear"></div>

    <!--分页 -->
    <ul class="mr-pagination mr-pagination-right">
      <li :class="{'mr-disabled':curentPage==1}" @click="jump(curentPage-1)"><a href="javascript:void(0)">&laquo;</a></li>
      <li :class="{'mr-active':curentPage==n}" v-for="n in pages" :key="n" @click="jump(n)">
        <a href="javascript:void(0)">{{n}}</a>
      </li>
      <li :class="{'mr-disabled':curentPage==pages}" @click="jump(curentPage+1)"><a href="javascript:void(0)">&raquo;</a></li>
    </ul>
    <div class="clear"></div>

    <div class="tb-reviewsft">
      <div class="tb-rate-alert type-attention">购买前请查看该商品的 <a href="javascript:void(0)">购物保障</a>，明确您的售后保障权益。</div>
    </div>

  </div>
</template>
<script>
  //var items = document.querySelectorAll('.mr-comment');
  export default {
    data: function () {
      return {
        items: [],
        eachNum: 3,
        curentPage: 1
      }
    },
    mounted: function(){
      this.items = document.querySelectorAll('.mr-comment');
      for(var i = 0; i < this.items.length; i++){
        if(i < 3){
          this.items[i].style.display = 'block';
        }else{
          this.items[i].style.display = 'none';
        }
      }
    },
    computed: {
      count: function () {
        return this.items.length;
      },
      pages: function () {
        return Math.ceil(this.count/this.eachNum);
      }
    },
    methods: {
      jump: function (n) {
        this.curentPage = n;
        if(this.curentPage < 1){
          this.curentPage = 1;
        }
        if(this.curentPage > this.pages){
          this.curentPage = this.pages;
        }
        for(var i = 0; i < this.items.length; i++){
          this.items[i].style.display = 'none';
        }
        var start = (this.curentPage - 1) * this.eachNum;
        var end = start + this.eachNum;
        end = end > this.count ? this.count : end;
        for(var j = start; j < end; j++){
          this.items[j].style.display = 'block';
        }
      }
    }
  }
</script>

<style src="../../assets/css/optstyle.css" scoped></style>
<style src="../../assets/css/infoStyle.css" scoped></style>
